import { useCallback } from "react"
import { setTheme, ThemeName } from "@/styles/themes"
import { useGlobalStore } from "@/mobx"

export const useChangeTheme = () => {
    const { changeState } = useGlobalStore()

    // 修改主题色
    const changeTheme = useCallback(
        (t: ThemeName) => {
            setTheme(t, (_t) => changeState("theme", _t as never))
        },
        [changeState]
    )

    // 初始化主题色
    const initTheme = useCallback(() => {
        const localTheme = localStorage.getItem("theme")
        setTheme(localTheme as ThemeName, (_t) => changeState("theme", _t as never))
    }, [changeState])

    return { changeTheme, initTheme }
}
